<template>
  <div :id="id" :style="{ width: '100%', height: '250px' }" />
</template>

<script>
import * as echarts from 'echarts'
import { option1 } from './option'
export default {
  name: 'rule',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    max: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      id: 'echart-' + +new Date(),
    }
  },
  mounted() {
    this.$watch(
      'list',
      (list) => {
        // const myChart = echarts.init(document.getElementById(this.id));
        // const opt = option;
        // opt.xAxis.data = [];
        // opt.series[0].data = [];
        // opt.yAxis.max = this.max;
        // opt.yAxis.min = this.min;
        // list.forEach(item => {
        //   opt.xAxis.data.push(item.year);
        //   opt.series[0].data.push(item.insp_value);
        //   opt.series[0].markLine.data[0].yAxis = item.max;
        //   opt.series[0].markLine.data[1].yAxis = item.min;
        //   opt.series[0].markArea.data[0][0].yAxis = item.max;
        //   opt.series[0].markArea.data[0][1].yAxis = item.min;
        // });
        const myChart = echarts.init(document.getElementById(this.id))
        const o = option1
        o.yAxis.data = []
        o.series[0].data = []
        list.forEach((item) => {
          o.yAxis.data.push(item.year + '年')
          o.series[0].data.push(item.value)
        })
        myChart.setOption(o)
        setTimeout(function () {
          myChart.resize()
        }, 200)
      },
      {
        immediate: true,
      }
    )
  },
}
</script>

<style lang="scss" scoped></style>
